<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @media screen and (orientation: portrait) {
            html{
                width : 100% ;
                height : 100% ;
                background-color: white ;
                overflow : hidden;
            }
            body{
                width : 100% ;
                height : 100% ;
                background-color: red ;
                overflow : hidden;
            }
            #print{
                position : absolute ;
                background-color: yellow ;
            }
        }
        @media screen and (orientation: landscape) {
            html{
                width : 100% ;
                height : 100% ;
                background-color: white ;
            }
            body{
                width : 100% ;
                height : 100% ;
                background-color: white ;
            }
            #print{
                position : absolute ;
                top : 0 ;
                left : 0 ;
                width : 100% ;
                height : 100% ;
                background-color: yellow ;
            }
        }

    </style>
</head>
<body class="webpBack">
<div id="print">
    <p>lol</p>

</div>
<script>

    var width = document.documentElement.clientWidth;
    var height =  document.documentElement.clientHeight;
    if( width < height ){
        console.log(width + " " + height);
        $print =  $('#print');
        $print.width(height);
        $print.height(width);
        $print.css('top',  (height-width)/2 );
        $print.css('left',  0-(height-width)/2 );
        $print.css('transform' , 'rotate(90deg)');
        $print.css('transform-origin' , '50% 50%');
    }
</script>
</body>
</html>